<template>
  <div class="banner">
    <div id="container" ref="bannerContainer">
      <div class='example' :class="{
        one: i==0,
        two: i!=0
        }" :ref="'example'+i"
        v-for="item,i in list" :key="i" :style="styleList[i]"
       @click="show(item)" @mouseover="mouseover" @mouseout="mouseout">
        <div class="img">
          <img :src="item.poster"/>
        </div>
        <div class="name">
          {{item.name}}
        </div>
      </div>
    </div>

    <div class="banner-btn">
      <div class="btn" :class="{
          active: index === current
        }" @click="current = index" v-for="item,index in btnList" :key="index">{{item.label}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      current: 2,
      btnList: [{label: '图片'},{label: '文章'},{label: '视频'},{label: '音频'}],
      list: [
      {"url":"http://122.227.36.162:6810/admin/sys-file/ecminio/275280cd2b774030b152abc465acf400.mp4","poster":"http://122.227.36.162:6810/admin/sys-file/ecminio/c740a57fd943438f908080add4506837.jpg","name":"24节气立夏"},
      {"url":"http://122.227.36.162:6810/admin/sys-file/ecminio/f74fb742a5094b83b67aa20f8777852d.mp4","poster":"http://122.227.36.162:6810/admin/sys-file/ecminio/aa623f6132b0439fbd912fb58ee202af.jpg","name":"24节气小暑演讲"},
      {"url":"http://122.227.36.162:6810/admin/sys-file/ecminio/e7a02194e90d476f971188fa47e2a6a6.mp4","poster":"http://122.227.36.162:6810/admin/sys-file/ecminio/39cd48e51a99421a9a754210afca2176.jpg","name":"春分 来和春天一起约会吧"},
{"url":"http://122.227.36.162:6810/admin/sys-file/ecminio/fc08a0f61e8141da8620915ca6efd100.mp4","poster":"http://122.227.36.162:6810/admin/sys-file/ecminio/2834e1f9dc424563b759dd71581ba070.jpg","name":"扛旗争先开新局29个上榜！ 城乡风貌样板区赋能金华城市发展"},
      {"url":"http://122.227.36.162:6810/admin/sys-file/ecminio/fc08a0f61e8141da8620915ca6efd100.mp4","poster":"http://122.227.36.162:6810/admin/sys-file/ecminio/2834e1f9dc424563b759dd71581ba070.jpg","name":"迎亚运省运金华风貌提升整治已全面启动"},
      {"url":"http://122.227.36.162:6810/admin/sys-file/ecminio/d0066a157e0a42528155eb14d473fc61.mp4","poster":"http://122.227.36.162:6810/admin/sys-file/ecminio/c2ab3dd39f774583864c66205658e01b.jpg","name":"九九重阳节 浓浓敬老情"},
      {"url":"http://122.227.36.162:6810/admin/sys-file/ecminio/d4efbf9e9c6e44b8aa8f1f6fd65a7f81.mp4","poster":"http://122.227.36.162:6810/admin/sys-file/ecminio/0dd451e297174503b9f5fb04b1d0bb67.jpg","name":"重阳节 手势舞"}
      ],
      styleList: [
        {
          transform: 'translate(0px, 0px) scale(1) translateZ(0px)',
        },
        {
          transform: 'translate(-320px, -70px) scale(0.67) rotateY(-10deg) translateZ(-100px)',
        },
        {
          transform: 'translate(-220px, -175px) scale(0.67) translateZ(-200px)',
        },
        {
          transform: 'translate(0px, -240px) scale(0.5) translateZ(-300px)',
        },
        {
          transform: 'translate(220px, -175px) scale(0.67) translateZ(-200px)',
        },
        {
          transform: 'translate(320px, -70px) scale(0.67) translateZ(-100px)',
        },
      ],
      index: 0,
      timeout: null,
      bol: true
    }
  },
  created(){
    for (var i = 0; i < 6; i++) {
      this.styleList.push(this.styleList[i])
    }
  },
  mounted(){
    this.init()
  },
  methods: {
    init(){
      var ctx = this
      this.timeout = setTimeout(function(){
        if(ctx.bol){
          ctx.index +=1
          for (var i = 0; i < 6; i++) {
            ctx.$refs['example'+i][0].style.transform = ctx.styleList[i+ctx.index].transform
            ctx.$refs['example'+i][0].className = 'example two'
          }
          if(ctx.index===0 || ctx.index===6){
            ctx.$refs['example0'][0].className = 'example one'
          }
          if(ctx.index===1){
            ctx.$refs['example5'][0].className = 'example one'
          }
          if(ctx.index===2){
            ctx.$refs['example4'][0].className = 'example one'
          }
          if(ctx.index===3){
            ctx.$refs['example3'][0].className = 'example one'
          }
          if(ctx.index===4){
            ctx.$refs['example2'][0].className = 'example one'
          }
          if(ctx.index===5){
            ctx.$refs['example1'][0].className = 'example one'
          }
        }
        if(ctx.index ===6){
          ctx.index = 0
        }
        setTimeout(()=>{
          ctx.init()
        },800);
      },800)
    },
    mouseover(){
      this.bol =false
    },
    mouseout(){
      this.bol = true
    },
    show(item){
      this.$emit('showVideo', item)
    }
  }
}
</script>

<style lang="less" scoped>
.banner{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
	// -webkit-perspective: 800px;
	//    -moz-perspective: 800px;
  //           perspective: 800px;

	-webkit-transition: top .5s;
  #container{
    width: 100%;
    height: 100%;
    position: absolute;
    width: 169px;
    height: 228px;
    left: 50%;
    top: 48%;
    margin-left: -169px;
    cursor: pointer;

    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
            transition: transform 1s;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
  }
  .example{
    width: 338px;
    height: 455px;
  	overflow:hidden;
  	-webkit-transition: opacity 1s, -webkit-transform 1s;
         -moz-transition: opacity 1s, -moz-transform 1s;
              transition: opacity 1s, transform 1s;

  	position: absolute;
  	bottom: 0;
      background: url(./center/c-bg1.png) no-repeat;
      background-size: 338px 455px;
    .img{
      width: 275px;
      height: 233px;
      padding-top: 60px;
      margin: 0 auto;
      img{
        width: 100%;
        padding: 5px 10px 10px 10px;
      }
    }
    .name{
      font-size: 37px;
      color: rgba(17,108,146,1);
      text-align: center;
      padding: 30px 40px;
      height: 180px;
      overflow: hidden;
    }
  }
  .one{
    background: url(./center/c-bg1.png) no-repeat;
    background-size: 338px 455px;
  }
  .two{
    background: url(./center/c-bg2.png) no-repeat;
    background-size: 316px 430px;
    background-position: center;
  }
}
.banner-btn{
  position: absolute;
  bottom: 0;
  left: 100px;
  .btn{
    background: url(./center/btn.png) no-repeat;
    background-size: 80%;
    background-position: center;
    width: 111px;
    height: 108px;
    text-align: center;
    line-height: 108px;
    color: #fff;
    float: left;
    margin-right: 50px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 20px;
    &.active{
      background-size: 100%;
      font-size: 24px;
    }
  }
}

</style>
